<!-- 搜索历史 -->
<template>
  <div class="box">
    <el-form>
      <div class="form_box">
        <el-input v-model="userId" clearable style="width: 200px;" placeholder="请输入用户ID" /><el-input v-model="keyword" clearable style="width: 200px;" placeholder="请输入搜索历史关键字" /><el-button type="primary" icon="el-icon-search" @click="find">查找</el-button><el-button type="primary" icon="el-icon-download" @click="exportInformation">导出</el-button>
      </div>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column align="center" label="搜索ID" prop="id" width="100" sortable />
      <el-table-column align="center" label="用户ID" prop="userId" />
      <el-table-column align="center" label="关键字" prop="keyword" />
      <el-table-column align="center" label="添加时间" prop="addTime" />
    </el-table>
    <div class="pagination_box">
      <pagination :total="total" :page="query.page" @size="setSize" @current="setCurrent" />
    </div>
  </div>
</template>

<script>
  import { list } from '@/api/history'
  import pagination from '@/views/pagination.vue'

  export default {
    components: {
      pagination
    },
    data() {
      return {
        form: [],
        userId: '',
        keyword: '',
        tableData: [],
        query: {
          page: 1,
          limit: 20
          // sort: add_time,
          // order: desc
        },
        total: null
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        list(this.query).then(res => {
          if (res.data.errno == 0) {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          }
        })
      },
      // 分页
      setSize(val) {
        this.query.page = 1
        this.query.limit = val
        this.getList()
      },
      setCurrent(val) {
        this.query.page = val
        this.getList()
      },
      // 查找
      find() {
        this.query = {
          page: 1,
          limit: 20,
          userId: this.userId,
          keyword: this.keyword
        }
        this.getList()
      },
      // 导出
      exportInformation() {
        // 创建一个blob对象, 用于存储execl文件的数据
        var blob = new Blob([this.tableData])
        // 创建一个a标签
        const link = document.createElement('a')
        // URL.createObjectURL创建一个下载链接, 并将其设置为a的href
        link.href = window.URL.createObjectURL(blob)
        link.target = '_blank'
        // 设置文件名
        const nowTime = new Date()
        link.setAttribute('download', `用户搜索历史信息.xlsx`)
        // 将a标签添加到页面的body上
        document.body.appendChild(link)
        // 触发点击事件
        link.click()
        // 移除a标签
        document.body.removeChild(link)
      }
    }
  }
</script>

<style>
  .box {
    padding: 20px;
  }
  .el-form {
    padding-bottom: 10px;
  }
  .form_box {
    margin-bottom: 10px;
  }
  .pagination_box {
    padding: 32px 16px;
    margin-top: 30px;
  }
</style>